<template>
  <div class="view-container group-manager">
<!--    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>分组管理</span>
        </div>
        <div class="header-form">
          &lt;!&ndash;更多&ndash;&gt;
          <div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
&lt;!&ndash;          <div class="header-form-item">
            <el-button type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
          </div>&ndash;&gt;
          &lt;!&ndash;搜索&ndash;&gt;
          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <div class="header-form-item title-search">
            <el-input v-model.trim="searchForm.title" placeholder="分组名称" clearable @input="fetchData"></el-input>
          </div>
        </div>
      </div>
    </header>-->

    <list-header
      :title="'分组管理'"
      :delText="isBatchesDel"
      :delLoading="delLoading"
      @del="del"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
      <div class="header-form-item title-search" slot="search-item-1">
        <el-input v-model.trim="searchForm.title" placeholder="分组名称" clearable @input="AntiShake"></el-input>
      </div>
    </list-header>

    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="groupName" label="分组名称"/>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="dialog.show" :close-on-click-modal="false"
               :title="dialog.title" :before-close="beforeClose">
      <el-form ref="form" :rules="rules" :model="formModel" label-width="80px">
        <el-form-item label="分组名称" prop="groupName">
          <el-input v-model="formModel.groupName" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="success"
          @click="submitForm"
          :loading="dialog.changeLoading">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import addressBookAPI from '@/api/addrbook/addbok'
  import ListHeader from '@/common/ListHeader'
  import {mapGetters} from 'vuex'
  export default {
    name: 'GroupManager',
    mixins: [listMixin],
    components:{ListHeader},
    data() {
      return {
        searchForm: {
          title: ''
        },
        mixinParams: {
          propertyName: 'id',
          API: addressBookAPI,
          deleteMethod:'deleteGroups'
        },
        dialogShow: false,
        detailObj: {},

        formModel:{
          groupName:'',
          id:'',
          userId:''
        },
        rules:{
          groupName:[
            {required: true, message: '请输入分组名称', trigger: 'blur'}
          ]
        },
        selectedObj:[],
        delLoading:false,
        dialog:{
          show:false,
          changeLoading:false,
          title:'添加分组'
        }
      }
    },
    computed:{
      ...mapGetters([
        'userId'
      ])
    },
    created() {
      this.formModel.userId = this.userId
    },
    methods: {
      openEditDialog(isEdit) {
        if(isEdit){
          if(this.multipleSelected.length === 0){
            this.$message.info('请选择要编辑的记录')
            return
          }
          if(this.multipleSelected.length > 1){
            this.$message.info('您一次只能编辑一条记录')
            return
          }
          const obj = this.getObjFromTableData('id')
          this.formModel.groupName = obj.groupName
          this.formModel.id = obj.id
          this.dialog.title = '编辑分组'
        }else{
          this.dialog.title = '添加分组'
        }
        this.dialog.show = true
      },
      resetForm(){
        this.formModel.groupName = ''
        this.formModel.id = ''
      },
      beforeClose(done) {
        this.resetForm()
        done(true)
      },
      submitForm(){
        this.$refs['form'].validate(valid=>{
          if(valid && !this.dialog.changeLoading){
            this.saveOrUpdate()
          }
        })
      },
      saveOrUpdate(){
        this.dialog.changeLoading = true
        const promise = this.formModel.id ? addressBookAPI.editGroup(this.formModel) :
          addressBookAPI.addGroup(this.formModel.groupName)
        promise.then(res=>{
          this.dialog.changeLoading = false
          this.$message.success('保存成功')
          this.resetForm()
          this.dialog.show = false
          this.fetchData()
        })
      },
      fetchData() {
        addressBookAPI.groupList(this.searchForm.title,this.page).then(res => {
          console.log(res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      showDetail(row) {
        this.detailObj = row
        this.detailObj.created = new Date(this.detailObj.created).Format('yyyy-MM-dd hh:mm:ss')
        this.dialogShow = true
      },
      dateFmt(row) {
        return new Date(row.created).Format('yyyy-MM-dd hh:mm:ss')
      }
    }
  }
</script>


<style lang="scss">
  .gui-zhang-list {
    a {
      color: #1890ff;
    }
  }
  .group-manager {
    .el-dialog {
      width: 30%;
    }
    .el-form-item {
      margin-bottom: 0;
    }
  }
</style>

<style scoped lang="scss">
  .el-dialog {
    .header {
      .title-1 {
        text-align: center;
      }
    }

    .body {
      line-height: 30px;
      padding-top: 10px;
    }

    .info {
      padding-bottom: 5px;
      border-bottom: 1px solid #d3d3d3;

      span {
        margin-right: 20px;
      }
    }

  }
</style>

